<template>
    <div class="healthDoc">
        <Row class="back">
            <Col align="right"><Button type="default" @click="$router.back()">返回</Button></Col>
        </Row>
        
        <div>
            <h4>基础信息</h4>
            <Row class="block">
                <Col class="line" span="6">
                    <div><label for="">姓名</label><span>{{customerName}}</span> </div>
                    <div><label for="">手机号码</label><span>{{mobile}}</span> </div>
                    <div><label for="">身高(cm)</label><span>{{customerInfo.height}}cm</span> </div>
                    <div><label for="">患者类型</label><span>{{getDiseaseType(customerInfo.diseaseType)}}</span> </div>
                    <div><label for="">所在地址</label><span>{{customerInfo.province + customerInfo.city + customerInfo.district + customerInfo.address}}</span> </div>
                    <div><label for="">备注说明</label><span>{{customerInfo.remark}}</span></div>
                </Col>
                <Col class="line" span="6">
                    <div>
                        <label for="">性别</label>
                        <span v-if="Number(sex)===1">男</span>
                        <span v-else-if="Number(sex)===2">女</span>
                        <span v-else>-</span>
                    </div>
                    <div><label for="">身份证号</label><span>{{customerInfo.idCard}}</span> </div>
                    <div><label for="">体重(kg)</label><span>{{customerInfo.weight}}kg</span> </div>
                    <div><label for="">并发症</label><span>{{customerInfo.complication}}</span> </div>
                </Col>
                <Col class="line" span="6">
                    <div><label for="">出生日期</label><span>{{birthday | YMD}}</span> </div>
                    <div><label for="">联系人</label><span>{{contactPerson}}</span> </div>
                    <div>
                        <label for="">婚姻状态</label>
                        <span v-if="Number(customerInfo.marryFlag)===0">未婚</span> 
                        <span v-else-if="Number(customerInfo.marryFlag)===1">已婚</span> 
                        <span v-else>-</span>
                    </div>
                    <div><label for="">确诊年份</label><span>{{customerInfo.careTime}}</span></div>
                    <div><label for="">患者标签</label>
                        <span>{{tags}}</span>
                    </div>
                </Col>
                <Col class="line" span="6">
                    <div><label for="">年龄</label><span>{{birthday | AGE}}</span> </div>
                    <div><label for="">联系电话</label><span>{{customerInfo.contactPhone}}</span> </div>
                    <div><label for="">职业</label><span>{{customerInfo.profession}}</span> </div>
                    <div><label for="">会员卡号</label><span>{{customerInfo.vipNumber}}</span> </div>
                </Col>
            </Row>
            <Divider />
        </div>
        <div class="table">
            <h4>健康信息</h4>
            <Row class="block">
                <Col class="line" span="12">
                    <div><label for="">疾病史</label><span>{{getDiseaseHistoryValue(customerHistory.diseaseHistory)}}</span> </div>
                    <div><label for="">现病史</label><span>{{getDiseaseHistoryValue(customerHistory.nowHistory)}}</span> </div>
                    <div><label for="">过敏史</label><span>{{getAllergicList(customerHistory.allergyHistory)}}</span> </div>
                </Col>
                <Col class="line" span="12">
                    <div><label for="">家族史</label><span>{{getFamilyHistoryValue(customerHistory.familyHistory)}}</span> </div>
                    <div><label for="">现在治疗方式</label><span>{{getNowTreatmentValue(customerHistory.nowTreatment)}}</span> </div>
                    <div><label for="">过去治疗方式</label><span>{{getNowTreatmentList(customerHistory.passTreatment)}}</span> </div>
                </Col>
            </Row>
            <Divider />
        </div>
        <div class="table">
            <h4>生活习惯</h4>
            <Row class="block">
                <Col class="line" span="12">
                    <div>
                        <label for="">劳动强度</label>
                        <span v-if="Number(customerHabit.labor)===1">轻度</span>
                        <span v-else-if="Number(customerHabit.labor)===2">中度</span>
                        <span v-else-if="Number(customerHabit.labor)===3">重度</span>
                        <span v-else-if="Number(customerHabit.labor)===3">卧床休息</span>
                        <span v-else>-</span>
                    </div>
                    <div>
                        <label for="">抽烟情况</label>
                        <span v-if="customerHabit.smoke">有，</span>
                        <span v-else>无</span>
                        <span v-if="customerHabit.smoke">{{customerHabit.smokeRate}}&nbsp;支/天</span>
                    </div>
                </Col>
                <Col class="line" span="12">
                    <div><label for="">锻炼情况</label><span>{{customerHabit.exercise===1?'有':'无'}}</span> </div>
                    <div><label for="">饮酒情况</label><span>{{customerHabit.drink===1?('有，' + customerHabit.drinkRate + ' ml/天'):'无'}}</span></div>
                </Col>
            </Row>
            <Divider />
        </div>
        <div class="table">
            <h4>家庭成员</h4>
            <Table class="mt20" :loading="loading" :columns="tableColumns" :data="customerFamilyList">
                <template slot-scope="{row}" slot="relationship">
                    <span>{{getfamilyRelationshipValue(row.relationship)}}</span>
                </template>
            </Table>
                
        </div>
    </div>
</template>
<script>
import { mapState } from '@lib/x_.js'
import { customerAdd, customerPageQueryList, customerPageQueryInterventionList, customerUpdateInfo, customerPageQueryFollowList, customerGet, customerUpdateHistory, customerUpdateHabit, customerUpdateFamily } from '@api/customer.js'
export default {
    data () {
        return {
            customerName: '',
            mobile: '',
            sex: '',
            birthday: '',
            headimgurl: '',
            customerInfo: {
                idCard: '',
                contactPerson: '',
                contactPhone: '',
                height: '',
                weight: '',
                marryFlag:'0',//是否已婚，0：不是，1：是
                profession: '',
                diseaseType: '',
                complication:'',
                careTime: '',
                vipNumber: '',
                province: '',
                provinceId: '',
                city: '',
                cityId: '',
                district:'',
                districtId: '',
                address: '',
                remark: '', //必须
            },
            tags: '',
            customerHistory: { //健康信息
                diseaseHistory: '',
                nowHistory:'',
                allergyHistory: '',
                familyHistory: '',
                nowTreatment: '',
                passTreatment: '',
            },
            customerHabit: {
                labor: '',
                smoke: '',
                smokeRate: '',
                drink: '',
                drinkRate: '',
                exercise: '',
            },
            customerFamilyList: [
               
            ],
            tableColumns: [
                {
					title: '关系',
					align: 'left',
					slot: 'relationship',
                },
                {
					title: '姓名',
					align: 'left',
					key: 'familyName',
                },
                {
					title: '联系电话',
					align: 'left',
					key: 'familyMobile',
                },
                {
					title: '备注',
					align: 'left',
					key: 'familyRemark',
				},
            ]
        }
    },
    mounted(){
        const { id } = this.$route.query;
        if (id) {
            this.customerGet(id);
        }
    },
    computed: {
        ...mapState(['diseaseTypeList','familyList','diseaseHistoryList','familyHistoryList','nowTreatmentList','tagList','allergicList']),
    },
    methods: {
        getNowTreatmentList(itemKey){
            if (itemKey) {
                itemKey = itemKey.split(",")
                let str = '';
                itemKey.map((key,i) => {
                    const idx = this.nowTreatmentList.findIndex((item,i) => item.itemKey === key)
                    if (idx > -1) {
                        str += this.nowTreatmentList[idx]['itemValue'] + '，'
                    } else {
                        str += ''
                    }
                })
                return str
            } else {
                return ''
            }
        },
        getAllergicList(itemKey){
            if (itemKey) {
                itemKey = itemKey.split(",")
                let str = '';
                itemKey.map((key,i) => {
                    const idx = this.allergicList.findIndex((item,i) => item.itemKey === key)
                    if (idx > -1) {
                        str += this.allergicList[idx]['itemValue'] + '，'
                    } else {
                        str += ''
                    }
                })
                return str
            } else {
                return ''
            }
        },
        getfamilyRelationshipValue(itemKey){
            const idx = this.familyList.findIndex((item,i) => Number(item.itemKey) === itemKey)
            if (idx > -1) {
                return this.familyList[idx]['itemValue']
            } else {
                return ''
            }
        },
        // familyHistory
        getNowTreatmentValue(itemKey){
            if (itemKey) {
                itemKey = itemKey.split(",")
                let str = '';
                itemKey.map((key,i) => {
                    const idx = this.nowTreatmentList.findIndex((item,i) => item.itemKey === key)
                    if (idx > -1) {
                        str += this.nowTreatmentList[idx]['itemValue'] + '，'
                    } else {
                        str += ''
                    }
                })
                return str
            } else {
                return ''
            }
        },
        getFamilyHistoryValue(itemKey){
            if (itemKey) {
                itemKey = itemKey.split(",")
                let str = '';
                itemKey.map((key,i) => {
                    const idx = this.familyHistoryList.findIndex((item,i) => item.itemKey === key)
                    if (idx > -1) {
                        str += this.familyHistoryList[idx]['itemValue'] + '，'
                    } else {
                        str += ''
                    }
                })
                return str
            } else {
                return ''
            }
        },
        getDiseaseHistoryValue(itemKey){
            if (itemKey) {
                itemKey = itemKey.split(",")
                let str = '';
                itemKey.map((key,i) => {
                    const idx = this.diseaseHistoryList.findIndex((item,i) => item.itemKey === key)
                    if (idx > -1) {
                        str += this.diseaseHistoryList[idx]['itemValue'] + '，'
                    } else {
                        str += ''
                    }
                })
                return str
            } else {
                return ''
            }
        },
        getDiseaseType(itemKey){
            const idx = this.diseaseTypeList.findIndex((item,i) => item.itemKey === itemKey)
            if (idx > -1) {
                return this.diseaseTypeList[idx]['itemValue']
            } else {
                return ''
            }
        },
        // customerHistory.diseaseHistory
        async customerGet(id){
            const res = await customerGet({id})
            if (res.code === '0') {
                const { data } = res;
                const { customerTags } = res.data;
                let str = '';
                Object.keys(data).map((item,i) => {
                    this[item] = data[item];
                })
                this.tagList.map((tag,i) => {
                    console.log(tag)
                    customerTags.map((cu,t) =>{
                        console.log(cu)
                        if (tag.id === cu.tagId) {
                            str += tag.tagName + '，'
                        }
                    })
                })
                this.tags = str;
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .healthDoc{
        background-color: #fff;
    }
    h3{
        text-align: center;
        font-size: 25px;
    }
    h4{
        font-size: 18px;
        font-weight: normal;
    }
    .ivu-divider{
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .table{
        margin-top: 30px;
    }
    .block{
        margin-top: 20px;
        .line{
            div{
                display: flex;
                line-height: 2.5em;
                // font-size: 14px;
                label{
                    margin-right: 10px;
                    white-space: nowrap;
                    overflow: hidden;
                    color: #515A6E;
                }
                span{
                    color: #808695;
                }
            }
        }
    }
</style>